<template>
  <div>
    <v-nav :current="'5'" :langType="lang" :lang="lang" @EnData="EnData" @ChData="ChData"></v-nav>
    <div class="banner-s">
      <img src="@/assets/banner5.jpg" alt="" style="width: 100%;border: 0">
    </div>
    <div class="j-brief">
      <a href="#s1">{{chenguo}}</a>
      <a href="#s2">{{pingtai}}</a>
      <a href="#s3">{{team}}</a>
    </div>
    <div class="p-content">
      <div class="title" id="s1">
        <h1>{{title[0]}}</h1>
        <h2>{{yanfaList.chengguo[0]}}</h2>
        <p>{{yanfaList.chengguo[1]}}</p>
      </div>
      <div class="lanmu">
        <h1>{{title[1]}}</h1>
        <div>
          <div>
            <p v-for="(item, index) in lists.new" :key="index">{{item}}</p>
            <!-- <p><span></span>1.马来酸麦角新碱注射液   子宫收缩药 国家基药定点生产</p> -->
          </div>
        </div>
      </div>
      <div class="title lanmuh1" v-if="false">
        <h1>{{title[2]}}</h1>
        <div class="tb">
            <div class="tab-head">
              <p style="width: 240px">{{tabName[0]}}</p>
              <p style="width: 480px">{{tabName[1]}}</p>
              <p style="width: 480px">{{tabName[2]}}</p>
            </div>
            <el-table
            :data="lists.up"
            stripe
            style="width: 100%">
            <el-table-column
              prop="name"
              label="产品名称"
              width="240"
              align="center"
              >
            </el-table-column>
            <el-table-column
              prop="ind"
              label="适应症"
              width="480"
              align="center"
              >
            </el-table-column>
            <el-table-column
              prop="notes"
              label="产品优势"
              width="480"
              align="center"
              >
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="title" id="s2">
        <h1>{{title[3]}}</h1>
        <h2>{{yanfaList.pingtai[0]}}</h2>
        <p>{{yanfaList.pingtai[1]}}</p>
      </div>
      <div class="pintai">
        <div v-for="(item, index) in lists.yf" :key="index">
          <img src="../assets/yanfa/31.png" alt="">
          <p><span style="font-weight: bold">{{item.title}}</span>{{item.title2}}</p>
        </div>
        <!-- <div>
          <img src="../assets/yanfa/31.png" alt="">
          <p>7.脂质体药物研究院： <span>专致开发具有国际一流水准的化疗、疫苗和核酸类脂质体药物。</span></p>
        </div> -->
      </div>
      <div class="title" id="s3">
        <h1>{{title[4]}}</h1>
      </div>
      <div>
        <img src="../assets/yanfa/4.png" alt="">
      </div>
      <div class="info">
        <div class="img-div">
          <img src="../assets/yanfa/2.png" alt="" v-if="!isShow">
          <img src="../assets/yanfa/21.png" alt="" v-if="isShow">
        </div>
        <div class="info-r">
          <h1>{{yanfaList.team[0]}}</h1>
          <p>{{yanfaList.team[1]}}</p>
        </div>
      </div>
    </div>
    <vFooter></vFooter>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import vNav from '@/components/nav.vue'
import vFooter from '@/components/footer.vue'
import { getResearchData } from '@/services/api.js'
import { getResearchDataEn } from '@/services/api_en.js'
export default {
  name: 'yanfa',
  data () {
    return {
      title: [],
      tabName: [],
      chenguo: null,
      pingtai: null,
      team: null,
      lists: [],
      activeNames: ['1'],
      isShow: null
    }
  },
  computed: {
    ...mapGetters({
      'lang': 'lang',
      'yanfaList': 'yanfaList'
    })
  },
  methods: {
    _getChList (sw, page) {
      this.title = ['研发成果', '新品上市', '即将上市', '研发平台', '研发团队']
      this.tabName = ['产品名称', '适应症', '产品优势']
      this.chenguo = '研发成果'
      this.pingtai = '研发平台'
      this.team = '研发团队'
      // this.lists = []
      // let para = this.page
      // console.log('第' + para + '页')
      console.log(1)
      getResearchData().then((res) => {
        console.log(res)
        this.lists = res
      })
    },
    _getEnList () {
      this.title = ['development results', 'new arrival', 'Coming soon', 'development platform', 'R & D Team']
      this.tabName = ['name', 'indication', 'advantage']
      this.chenguo = 'Research'
      this.pingtai = 'terrace'
      this.team = 'team'
      getResearchDataEn().then((res) => {
        console.log(res)
        this.lists = res
      })
    },
    version () {
      if (this.lang === 1) {
        this._getChList()
        this.isShow = true
      }
      if (this.lang === 2) {
        this._getEnList()
        this.isShow = false
      }
    },
    EnData (res) {
      this.version()
      this.isShow = true
    },
    ChData (res) {
      this.version()
      this.isShow = false
    }
  },
  components: {
    vNav,
    vFooter
  },
  created () {
    this.version()
    window.scrollTo(0, 0)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .lanmuh1>h1 {
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 1px;
    color: #2053b9;
    margin-top: 45px;
    margin-bottom: 27px;
    text-align: center;
  }
  .lanmu {
    >div {
      width: 1200px;
      height: 260px;
      background: url("/../../static/assets/11.png") no-repeat center;
      background-size: cover;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      div {
        p {
          font-size: 16px;
          color: #fff;
          line-height: 36px;
          text-indent: 129px;
          span {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius: 50%;
            margin-right: 10px
          }
        }
      }
    }
  }
  .pintai {
    // height: 311px;
    padding: 20px;
    background: url("/../../static/assets/3.png") no-repeat center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 36px;
    div {
      display: flex;
      align-items: flex-start;
      img {
        margin-top: 13px
      }
    }
    p {
      font-size: 14px;
      line-height: 36px;
      letter-spacing: 1px;
      color: #4d4d4d;
      margin-left: 17px;
    }
  }
  .info {
    display: flex;
    justify-content: space-between;
    margin-top: 92px;
    margin-bottom: 43px;
    .img-div {
      width: 498px;
      height: 305px;
      img {
        width: 100%;
        height: 100%
      }
    }
    .info-r {
      width: 519px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      h1 {
        font-size: 24px;
        line-height: 36px;
        letter-spacing: 1px;
        color: #2053b9;
      }
      p {
        font-size: 16px;
        line-height: 30px;
        letter-spacing: 1px;
        color: #4d4d4d;
        margin-top: 20px
      }
    }
  }
  .tb {
    position: relative;
    .tab-head {
      height: 47px;
      background-color: #2053b9;
      display: flex;
      position: absolute;
      width: 100%;
      z-index: 2;
      top: 0;
      p {
        font-size: 20px;
        letter-spacing: 2px;
        color: #fff;
        line-height: 47px;
        text-align: center
      }
    }
  }
</style>
